<template>
  <div class="aaa">
    <div class="bbb">
      <div class="ccc">
        <div class="eee">
          <div class="eee1">
            <div class="main_title">在电脑上听</div>
            <div class="eee11">
              <img src="https://p1.music.126.net/PGNd0EAtUgA7iRCWXPnUuA==/109951164207162781.png?param=800x0">
            </div>
            <div class="ddd">
              <div class="ddd1">

              </div>
              <div class="ddd2">


              </div>
              <div class="maxbtn">下载电脑端</div>
              <div class="msg">Windows beta版, 限量内测中！</div>
              <div class="msg1">(一起听暂未上线，加速开发中)</div>


            </div>
          </div>
          <div class="eee2">
            <div class="main_title">在手机上听</div>
            <div class="eee22">
              <img src="https://p1.music.126.net/sLtya87wVHWn-HWJ33oN4g==/109951164207180884.png?param=450x0">
            </div>
            <div class="rightdown">
              <div class="fff1">
              </div>
              <div class="fff2">
              </div>

              <div class="mxabtn"><li class="erweima"></li>下载手机端</div>

            </div>
          </div>
          
        </div>




        
      </div>

    </div>
    <div class="parttwo">
      <div class="p2left">


      <div class="leftmsg">
        千万曲库  首首CD音质
      </div>

      <div class="leftmsg1">>囊括百万无损SQ音乐，你在用手机听歌时，<br>也能感受到纤毫毕现的CD音质，更能免费离线收听</div>
      <div class="picbox">
        <div class="pic">
          <img src="https://p1.music.126.net/KP4aN9umGMNnCS8iCgiV9w==/109951164206415504.jpg">

        </div>

      </div>
      </div>
    </div>



    <div class="partthree">
<div class="threeleft">
  <div class="partthree1">
    <img src="https://p1.music.126.net/rpwYXqZt_UpO_de46JyYwQ==/109951164488922626.jpg">
  </div>

  <div class="threemsg">
    千位明星  亲自推荐音乐
  </div>

  <div class="threemsg1">韩红，戴佩妮等<em>千位明星已入驻</em>、DJ和好友，通过浏览他们的动态、收藏和<br>家DJ节目，推荐他们心中的好音乐</div>
</div>
    </div>



    <div class="four">

      <div class="fourmsg">
        社交关系  发现全新音乐
      </div>

      <div class="fourmsg1">你可以<em>关注明星</em>，亲自创建私房歌单，录制独<br>分享，发现更多全新好音乐</div>

      <div class="pc">
        <div class="picture">
          <img src="	https://p1.music.126.net/9CQFSDAZN7TcOWz7UNEqmQ==/109951164488924083.jpg">
        </div>
      </div>
    </div>



    <div class="partthree">
      <div class="threeleft">
        <div class="partthree1">
          <img src="https://p1.music.126.net/IZIgZjpBv9WkyMZ53i043w==/109951164206417003.jpg">
        </div>

        <div class="threemsg">
          手机电脑  歌单实时同步
        </div>

        <div class="threemsg1">只要一个帐号，你就可以同步在手机、电脑上创建、收藏<br>的歌单，<em>随时随地畅享好音乐</em></div>
      </div>
    </div>



    <div class="four">

      <div class="fourmsg">
        听歌识曲  助你疯狂猜歌
      </div>

      <div class="fourmsg1">歌曲很动听却不知道歌名，歌名在嘴边却想不起来……<br>用<em>听歌识曲</em>功能，几秒钟就知道歌名</div>

      <div class="pc">
        <div class="picture">
          <img src="https://p1.music.126.net/MGGp3L7AerIVlskMkAk1HA==/109951164488904737.jpg">
        </div>
      </div>
    </div>



    <div class="footer">

      <div class="copy1">
        <p>
          <span class="link1">服务条款</span>
          <span class="link1">|</span>
          <span class="link1">隐私政策</span>
          <span class="link1">|</span>
          <span class="link1">版权投诉指引</span>
          <span class="link1">|</span>
          <span class="link1">联系我们</span>
        </p>
        <p>
          <span class="link1">网易公司版权所有©1997-24</span>
          <span class="link1">杭州乐读科技有限公司运营：</span>
          <span class="link1">浙网文[2021] 1186-054号</span>
        </p>
        <p>
          <span class="link1">粤B2-20090191-18</span>
          <span class="link1">工业和信息化部备案管理系统网站</span>
        </p>

        <div class="label2">
          <ul class="enter2">
            <li class="p12"><span class="tt">用户认证</span></li>
            <li class="p22"><span class="tt">独立音乐人</span></li>
            <li class="p32"><span class="tt">赞赏</span></li>
            <li class="p42"><span class="tt">奖励</span></li>

          </ul>
        </div>

      </div>



    </div>

    </div>


</template>

<script>

export default {

}
</script>

<style scoped>
html,body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;

}
.aaa{
  width: 100%;
  height: 100%;
  //background: #ff2227;

}
.bbb{
  width: 100%;
  height: 667px;
  background: url("@/assets/img/1.png") no-repeat;
  background-color: #222;
  background-size: cover;
  font-family: PingFangSC-Regular;
}
.eee11 img{
  width: 464px;
  height: 273px;
}
.eee22 img{
  width: 299px;
  height: 331px;
  margin-left: 100px;
}
.ddd{
  display: flex;
  margin-left: 80px;
  position: relative;
}
.ddd1{
  width: 154px;
  height: 44px;
  background: url(@/assets/img/icon.png) no-repeat;
  background-size: contain;

}
.ddd2{
  width: 140px;
  height: 44px;
  background: url(@/assets/img/windows.png) no-repeat;
  background-size: contain;
}
.fff1{
  width: 154px;
  height: 44px;
  background: url(@/assets/img/icon.png) no-repeat;
  background-size: contain;
}
.fff2{
  width: 120px;
  height: 44px;
  background: url(@/assets/img/android.png) no-repeat;
  background-size: contain;
}
.rightdown{
  display: flex;
  margin-left: 120px;
  position: relative;
}
.eee{
  display: flex;
  width: 1100px;
  height: 764px;
}
.eee1{
  width: 556px;
  height: 475px;
  margin-left: 70px;

}
.eee2{
  width: 556px;
  height: 475px;
  margin-left: 370px;
}
.main_title{
  margin-top: 33px;
  width: 100%;
  text-align: center;
  font-size: 22px;
  opacity: 0.8;
  color: #FFFFFF;
  padding: 40px;
}
.maxbtn{
  width: 300px;
  height: 65px;
  margin: 0 auto;
  border-radius: 65px;
  background-color: #fff;
  color: #D10000;
  font-size: 22px;
  line-height: 65px;
  text-align: center;
  cursor: pointer;
  box-sizing: content-box;
  position: absolute;
  top: 90px;
}
.erweima{
  display: inline-block;
  width: 21px;
  height: 21px;
  margin-right: 3px;
  background: url(@/assets/img/erweima.png) no-repeat center;
  background-size: contain;
  vertical-align: -3px;
  position: absolute;
  top: 24px;
  left: 67px;
}
.mxabtn{
  width: 300px;
  height: 65px;
  margin: 0 auto;
  border-radius: 65px;
  background-color: #fff;
  color: #D10000;
  font-size: 22px;
  line-height: 65px;
  text-align: center;
  cursor: pointer;
  box-sizing: content-box;
  position: absolute;
  top: 70px;
}
.msg{
  padding-top: 12px;
  font-size: 14px;
  color: rgb(255, 255, 255);
  opacity: 0.6;
  position: absolute;
  right: 35%;
  margin-top: 160px;
}
.msg1{
  padding-top: 2px;
  font-size: 14px;
  color: rgb(255, 255, 255);
  opacity: 0.6;
  position: absolute;
  right: 35%;
  margin-top: 193px;
}


.parttwo{
  width: 1155px;
  background: white;
  height: 437px;
  border-bottom: 1px solid #e3e3e3;
  margin: 0 auto;
}
.picbox{
  position: relative;
}
.pic img{
  position: absolute;
  left:670px;
  top: -60px;
}
.leftmsg{
  font-size: 40px;
  font-weight: normal;
  padding: 45px 0 5px 0;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.leftmsg1{
  font-size: 16px;
  color: #666;
  line-height: 24px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.p2left{
  width: 500px;
  margin-top: 100px;
}



.partthree{
  background: #f8f8f8;
  height: 437px;
  border-bottom: 1px solid #e3e3e3;
  position: relative;
}
.partthree1 img{
  margin-top: 100px;
  position: relative;
  left: 150px;

}
.threemsg{
  font-size: 40px;
  font-weight: normal;
  padding: 45px 0 5px 0;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  position: absolute;
  left: 670px;
  top: 99px;

}
.threemsg1{
  font-size: 16px;
  color: #666;
  line-height: 24px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  position: absolute;
  left: 670px;
  top: 200px;
}
em{
  color:#cc0000;
}



.four{
  background: #fff;
  height: 437px;
  border-bottom: 1px solid #e3e3e3;
  position: relative;
}
.fourmsg{
  font-size: 40px;
  font-weight: normal;
  padding: 45px 0 5px 0;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  position: absolute;
  top: 125px;
  left: 150px;
}
.fourmsg1{
  font-size: 16px;
  color: #666;
  line-height: 24px;
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  position: absolute;
  top: 220px;
  left: 150px;
}
.picture img{
  position: absolute;
  left:670px;
  top: 70px;
}

.footer{
  position: relative;
  height: 170px;
  overflow: hidden;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
}
.copy1{
  width: 980px;
  height: 160px;
  adding-top: 60px;
  line-height: 24px;
  //margin: 0 auto;
  text-align: center;
  margin-top: 50px;
  margin-left: -112px;
}
.link1{
  margin-left: 5px;

}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: #666666;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;

  padding: 0;
}

.label2{
  width: 330px;
  height: 71px;
  position: relative;
}

.enter2{
  width: 330px;
  height: 71px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  bottom: 90px;
  left: 900px;
}

.p12{
  background: url("@/assets/img/foot_enter.png") no-repeat;
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background-size: 110px 450px;
  background-position: -63px -101px;
}
.p22{
  background: url("@/assets/img/foot_enter.png") no-repeat;
  background-position: 0 0;
  background-size: 110px 450px;
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;

}
.p32{
  background: url("@/assets/img/foot_enter.png") no-repeat;
  background-position: 0 0;
  background-size: 110px 450px;
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background-position: -60px -50px;
}
.p42{
  background: url("@/assets/img/foot_enter.png") no-repeat;
  background-position: 0 0;
  background-size: 110px 450px;
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  background-position: 0 -101px;
}
.tt {
  display: inline-block;
  width: 100px;
  margin-top: 50px;
  margin-left: -27.5px;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}
</style>
